/**
 * author: lionet
 * desc: 一个无依赖的放大图片功能封装
 * time: 2018-10-17
 * version: 1.0
 */

(function(global){
    let lionet = {};

    let imgs;

    lionet.init = function(opction = {}){
        const _this = this;
        this.opction = opction;

        let container = this.has(this.opction, "container") ?
                            this.opction.container :
                            "";

        imgs = this.has(this.opction, "class") ? 
                document.querySelectorAll(container + ' img' + this.opction.class) :
                imgs = document.querySelectorAll(container + " img");
                
        this.opction.cursor = this.has(this.opction, "cursor") ?
                                this.opction.cursor : true;

        this.opction.time = this.has(this.opction, "time") ?
                                this.opction.time : "200";

        this.opction.type = this.has(this.opction, "type") ?
                                this.opction.type : "scale";

        this.opction.area = this.has(this.opction, "area") ?
                                this.opction.area : ".76";

        imgs.forEach(item => {
            _this.on(item);
        })
    }

    lionet.on = function(img){
        let StyleStr = this.opction.cursor ? 
                        "lionet-img-cursor-in" : 
                        "";

        img.className += " " + this.getStyle(StyleStr);

        img.addEventListener('click', this.imgClick.bind(this, img), false);
    }

    lionet.imgClick = function(img){
        let x = img.offsetLeft;
        let y = img.offsetTop;
        let src = img.src;

        let screen = this.screen();

        this.stopScroll();

        if( this.opction.type == 'show' ){
            this.show(screen, src, img);
        }else{
            this.scale(screen, src, img);
        }

        this.opction.start && this.opction.start();
    }

    let ScaleImg; 
    let tranX, tranY;

    lionet.scale = function(screen, src, dom){
        const _this = this;
        let container = screen.getElementsByClassName('lionet-img-container')[0];
        let img = this.createImg(screen, src, '');

        tranX = container.offsetLeft - dom.offsetLeft;

        let docBody = document.documentElement || document.body;

        tranY = container.offsetTop - dom.offsetTop + docBody.scrollTop;

        img.style.transform = `translate3d(${-tranX}px, ${-tranY}px, 0)`;

        img.style.width = dom.offsetWidth + 'px';

        let area = this.opction.area;

        if( this.opction.phone && this.opction.phone.width && this.opction.phone.area && this.opction.phone.width >= container.offsetWidth ){
            area = this.opction.phone.area;
        }
        
        let times = (container.offsetWidth * area) / dom.offsetWidth; 

        setTimeout(() => {
            let left = (container.offsetWidth/2 - (img.offsetWidth)/2);
            let top = (container.offsetHeight/2 - (img.offsetHeight)/2);

            if( container.offsetHeight < img.offsetHeight * times ){
                top = (img.offsetHeight * times - img.offsetHeight) / 2;
            }

            img.style.transition = `transform ${this.opction.time / 1000}s ease-in-out,-webkit-transform ${this.opction.time / 1000}s ease-in-out`;
    
            img.style.transform = `translate3d(${left}px, 
                                            ${top}px, 0) scale3d(${times}, ${times}, 1)`;
            
            container.style.overflow = 'hidden';

            ScaleImg = img;
        }, 0);
        setTimeout(() => {
            container.style.overflow = 'auto';
        }, this.opction.time)
    }

    lionet.show = function(screen, src){
        let container = screen.getElementsByClassName('lionet-img-container')[0];
        let img = this.createImg(screen, src, 'lionet-img-show');

        if( this.opction.phone && this.opction.phone.width && this.opction.phone.area && this.opction.phone.width >= container.offsetWidth ){
            img.style.width = (container.offsetWidth * this.opction.phone.area) + 'px';
        }else{
            img.style.width = (container.offsetWidth * this.opction.area) + 'px';
        }

        let imgWidth = img.offsetWidth;
        let imgHeight = img.offsetHeight;

        if( !(container.offsetHeight < imgHeight) ){
            img.style.top = `calc(50% - ${imgHeight / 2}px)`;
        }
        
        img.style.left = `calc(50% - ${imgWidth / 2}px)`;
    }

    lionet.createImg = function(screen, src, type){
        let container = screen.getElementsByClassName('lionet-img-container')[0];
        let img = this.create('img', type);
        img.src = src;

        container.append(img);
        return img;
    }

    lionet.screen = function(){
        let dom = this.createScreen();
        screenDom.style.display = 'block';

        setTimeout(() => {
            screenDom.className = "lionet-img-screen lionet-img-screen-active";
        }, 0)

        return dom;
    }

    let screenDom;

    lionet.createScreen = function(){
        if( !screenDom ){
            let screen = this.create('div', 'lionet-img-screen');
            let container = this.create('div', 'lionet-img-container');
            const _this = this;

            screen.append(container);

            document.body.append(screen);
            
            screenDom = document.getElementsByClassName('lionet-img-screen')[0];

            screenDom.onclick = function(){
                screenDom.className = "lionet-img-screen lionet-img-screen-none";

                if( _this.opction.type == 'show' ){
                    container.innerHTML = "";
                }else if( _this.opction.type == 'scale' && ScaleImg ){
                    ScaleImg.style.transform = `translate3d(${-tranX}px, ${-tranY}px, 0)`;
                }
                
                _this.restopScroll();

                setTimeout(() => {
                    if( _this.opction.type == 'scale' ){
                        container.innerHTML = "";
                    }
                    
                    screenDom.style.display = 'none';

                    _this.opction.end && _this.opction.end();
                }, _this.opction.time);
            }
        }

        screenDom.style.transition = `background-color ${this.opction.time / 1000}s ease-in-out`;

        return screenDom;
    }

    lionet.stopScroll = function(){
        let body = document.body;
        let elem = document.getElementsByTagName('html')[0];

        body.style.overflow = 'hidden';
        elem.style.overflow = 'hidden';
    }
    lionet.restopScroll = function(){
        let body = document.body;
        let elem = document.getElementsByTagName('html')[0]

        body.style.overflow = '';
        elem.style.overflow = '';
    }

    lionet.styleClass = function(style){
        let str = ``;
        const _this = this;
        
        let classSplit = style.split(' ');

        classSplit.forEach(item => {
            _this.getStyle(item);

            str += item;
        });

        return str;
    }

    lionet.getStyle = function(type){
        let oStyle = document.querySelector('style');
        
        if( !oStyle ){
            let domStyle = document.createElement('style');
            document.head.append(domStyle);
            oStyle = document.querySelector('style');
        }

        if( !oStyle.innerHTML.match(type) ){
            oStyle.innerHTML += `
                ${this.getStyleInfo(type)}
            `;
        }

        return type;
    }

    lionet.getStyleInfo = function(type){
        switch(type){
            case "lionet-img-screen":
                return `
                    .lionet-img-screen{    
                        position: fixed;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        z-index: 101;
                        overflow: hidden;
                        padding: 10px 0;
                    }
                    .lionet-img-screen-active{
                        background: rgba(26,26,26,.65);
                    }
                    .lionet-img-screen-none{
                        background: rgba(26,26,26,0);
                    }
                `;
            break;
            case "lionet-img-container":
                return `
                    .lionet-img-container{
                        box-sizing: border-box;
                        height: 100%;
                        overflow: auto;
                    }
                    .lionet-img-container img:hover{
                        cursor: zoom-out;
                    }
                `;
            break;
            case "lionet-img-cursor-in":
                return `
                    .lionet-img-cursor-in:hover{
                        cursor: zoom-in;
                    }
                `;
            break;
            case "lionet-img-show":
                return `
                    .lionet-img-show{
                        position: relative;
                    }
                `;
            break;
            case "lionet-img-scale":
                return `
                    .lionet-img-scale{
                        position: relative;
                    }
                    `;
            break;
        }
    }

    lionet.create = function(elem, type){
        let dom = document.createElement(elem);
        dom.className = this.getStyle(type);

        return dom;
    }

    lionet.has = function(obj, i){
        return obj.hasOwnProperty(i);
    }

    global.imgScale = lionet;
}(window))